import React, { useState, useEffect } from 'react';
import { Row, Col, InputNumber, Button, Icon } from 'antd';
import { CASE_TYPE, DATA_TYPE_NUMBER, DATA_TYPE_BOOLEAN } from '../../../../utils/constant';

import PopValue from '../../../../components/PopTab/PopValue';
import RuleScoreCase from './ruleScoreCase';
import { compare } from '../../../../utils/compare';

export default function RuleScoreItem(props) {
  const [isExpended, setIsExpended] = useState(true);

  useEffect(() => {
    if (props.disabled) {
      setIsExpended(true);
    }
  }, [props.disabled]);

  const itemValue = props.value || {};
  // 修改左值
  const changeLeftValue = (value) => {
    itemValue.left_var_code = value.var_code;
    itemValue.left_var_name = value.var_name;
    itemValue.left_var_type = value.var_type;

    // 新增event_id
    if (value.event_id) {
      itemValue.left_event_id = value.event_id;
    }
    itemValue.left_var_data_type = value.data_type;
    itemValue.case_type =
      DATA_TYPE_NUMBER.includes(value.data_type) ||
      itemValue.left_var_data_type === null ||
      itemValue.left_var_data_type === undefined
        ? CASE_TYPE._NUMBERIC
        : CASE_TYPE._BOOL;
    props.onChange && props.onChange(itemValue);
  };

  // 默认分
  const changeScore = (value) => {
    itemValue.default_score = (value || value === 0) ? value : 1;
    props.onChange && props.onChange(itemValue);
  };

  // 箱体回调
  const handleChangeScore = (value) => {
    props.onChange &&
      props.onChange({
        ...itemValue,
        cases: value,
      });
  };

  const expend = (value) => {
    setIsExpended(!value);
  };
  return (
    <>
      <Row type='flex' justify='space-between' align='middle' gutter={10} className='rule-item'>
        {!props.disabled && (
          <Col span={1}>
            {isExpended ? (
              <Icon type='minus-square' style={{ fontSize: '16px' }} onClick={() => expend(isExpended)} />
            ) : (
              <Icon type='plus-square' style={{ fontSize: '16px' }} onClick={() => expend(isExpended)} />
            )}
          </Col>
        )}

        <Col span={1}>{props.index}</Col>
        <Col span={3}>
          <PopValue
            value={{ var_code: itemValue.left_var_code, var_name: itemValue.left_var_name, var_type: itemValue.left_var_type }}
            type={itemValue.left_var_type}
            event_id={itemValue.left_event_id}
            placeholder={props.isCompare ? '' : '左变量'}
            variable={props.variable}
            using_variables={props.using_variables}
            onChange={changeLeftValue}
            disabled={props.disabled}
            except={['literal']}
            dataType={[...DATA_TYPE_NUMBER, ...DATA_TYPE_BOOLEAN]}
            style={compare(props, 'left_var_code')}
            strategyId={props.strategyId}
            isLeft={true}
          />
        </Col>
        <Col span={3} style={compare(props, 'left_var_data_type')}>
          {DATA_TYPE_NUMBER.includes(itemValue.left_var_data_type) ||
          itemValue.left_var_data_type === null ||
          itemValue.left_var_data_type === undefined
            ? '数值类型'
            : DATA_TYPE_BOOLEAN.includes(itemValue.left_var_data_type)
            ? '枚举类型'
            : ''}
        </Col>
        <Col span={3} style={compare(props, 'cases', 'length')}>
          {itemValue.cases && itemValue.cases.length === 0 ? 2 : itemValue.cases.length}
        </Col>
        <Col span={3}>
          <InputNumber
            value={(itemValue.default_score || itemValue.default_score === 0) ? itemValue.default_score : 1}
            style={compare(props, 'default_score')}
            disabled={props.disabled}
            onChange={changeScore}
            max={99999}
            min={-99999}
            precision={4}
            step={1}
          />
        </Col>
        {!props.disabled && (
          <Col span={3}>
            <Button type='link' onClick={() => props.onDel && props.onDel()}>
              删除
            </Button>
            {props.index > 1 && (
              <Button type='link' onClick={() => props.onMove && props.onMove('up')}>
                上移
              </Button>
            )}
            {props.index !== props.len && (
              <Button type='link' onClick={() => props.onMove && props.onMove('down')}>
                下移
              </Button>
            )}
          </Col>
        )}
      </Row>
      {isExpended && (
        <div style={{ padding: '20px' }}>
          <RuleScoreCase
            {...props}
            value={itemValue.cases}
            onChange={handleChangeScore}
            data_type={itemValue.left_var_data_type}
            compareData={(props.compareData && props.compareData.cases) || []}
            leftConditionValue={{
              var_code: itemValue.left_var_code,
              var_name: itemValue.left_var_name,
              var_type: itemValue.left_var_type,
            }}
          />
        </div>
      )}
    </>
  );
}
